<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>css 换肤</title>
  <link rel="alternate stylesheet" type="text/css" href="red.css" title="红色" />
  <link rel="alternate stylesheet" type="text/css" href="green.css" title="绿色" />
  <link rel="stylesheet" type="text/css" href="default.css" title="默认" />
</head>

<body>
  选择样式：
  <input id="default" type="radio" name="skin" value="default.css" checked><label for="default">默认</label>
  <input id="red" type="radio" name="skin" value="red.css"><label for="red">红色</label>
  <input id="green" type="radio" name="skin" value="green.css"><label for="green">绿色</label>
</body>

<script>
  const $ = document.querySelectorAll.bind(document);
  var eleLinks = $('link[title]');
  var eleRadios = $('input[type="radio"]');
  [].slice.call(eleRadios).forEach(function (radio) {
    radio.addEventListener('click', function () {
      var value = this.value;
      [].slice.call(eleLinks).forEach(function (link) {
        link.disabled = true;
        if (link.getAttribute('href') == value) {
          link.disabled = false;
        }
      });
    });
  });
</script>

</html>